<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bruce</title>
  <link rel="stylesheet" href="/index.css">
  <link rel="stylesheet" href="/theme.css">
</head>

<body>
  <div class="container">
    <div class="header">
      <div class="title" onclick="Dialog.show('info')">Bruce [<span class="bruce-version">dev</span>]</div>
      <div class="left-part">
        <button class="btn-action act-oinput" data-action="serial">Serial Cmd</button>
        <button class="btn-action act-navigation" onclick="openNavigator()">Navigator</button>
      </div>
      <div class="right-part">
        <button class="btn-action" onclick="Dialog.show('settings')">Settings</button>
        <button class="btn-action" onclick="window.location.href='/logout'">Log Out</button>
      </div>
    </div>
    <div class="free-space">
      <span class="btn-action act-browse block-space free-sd" data-path="/" data-drive="SD">
        SDCard [<span>0 MB</span>]
      </span>
      <span class="btn-action act-browse block-space free-fs" data-path="/" data-drive="LittleFS">
        LittleFS [<span>0 MB</span>]
      </span>
    </div>
    <div class="action-content">
      <span class="breadcrumb">
        <button class="icon-action" id="refresh-folder" title="Refresh folder"
          onclick="fetchFiles(currentDrive, currentPath);">
          <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24">
            <path
              d="M21 12C21 16.9706 16.9706 21 12 21C9.69494 21 7.59227 20.1334 6 18.7083L3 16M3 12C3 7.02944 7.02944 3 12 3C14.3051 3 16.4077 3.86656 18 5.29168L21 8M3 21V16M3 16H8M21 3V8M21 8H16"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </button>
        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="13" height="13" viewBox="0,0,256,256">
          <g fill="#02de02" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt"
            stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none"
            font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
            <g transform="scale(5.12,5.12)">
              <path
                d="M5,4c-1.654,0 -3,1.346 -3,3v6h1h44h1v-2c0,-1.654 -1.346,-3 -3,-3l-26.95508,0.00586c-0.279,-0.101 -0.85602,-1.01967 -1.16602,-1.51367c-0.767,-1.224 -1.56191,-2.49219 -2.87891,-2.49219zM3,15c-0.552,0 -1,0.448 -1,1v27c0,1.657 1.343,3 3,3h40c1.657,0 3,-1.343 3,-3v-27c0,-0.552 -0.448,-1 -1,-1z">
              </path>
            </g>
          </g>
        </svg>
        <span class="current-path">LittleFS://</span>
      </span>
      <div class="body-actions">
        <button class="icon-action ml-10">
          <input type='file' class="inp-uploader" title="Upload files to current folder" multiple>
          <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24">
            <path fill="#02de02" fill-rule="evenodd"
              d="M4.25 5A2.75 2.75 0 0 1 7 2.25h7.987a1.75 1.75 0 0 1 1.421.73l3.014 4.197c.213.298.328.655.328 1.02V19A2.75 2.75 0 0 1 17 21.75H7A2.75 2.75 0 0 1 4.25 19V5ZM7 3.75c-.69 0-1.25.56-1.25 1.25v14c0 .69.56 1.25 1.25 1.25h10c.69 0 1.25-.56 1.25-1.25V8.897H15a.75.75 0 0 1-.75-.75V3.75H7Z"
              clip-rule="evenodd" />
            <path fill="#02de02"
              d="M15.086 13.219a.75.75 0 0 1-1.055.117l-1.28-1.026v3.44a.75.75 0 0 1-1.5 0v-3.44l-1.282 1.026a.75.75 0 0 1-.937-1.172l2.497-1.998a.747.747 0 0 1 .465-.166h.008c.18 0 .344.064.473.17l2.494 1.994a.75.75 0 0 1 .117 1.055Z" />
          </svg>
        </button>
        <button class="icon-action">
          <input type='file' class="inp-uploader" title="Upload folder to current folder" webkitdirectory directory
            multiple>
          <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24">
            <path fill="#02de02"
              d="M12.71 10.79a1 1 0 0 0-.33-.21a1 1 0 0 0-.76 0a1 1 0 0 0-.33.21l-2 2a1 1 0 0 0 1.42 1.42l.29-.3v2.59a1 1 0 0 0 2 0v-2.59l.29.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42ZM19 5.5h-6.28l-.32-1a3 3 0 0 0-2.84-2H5a3 3 0 0 0-3 3v13a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-10a3 3 0 0 0-3-3Zm1 13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-13a1 1 0 0 1 1-1h4.56a1 1 0 0 1 .95.68l.54 1.64a1 1 0 0 0 .95.68h7a1 1 0 0 1 1 1Z" />
          </svg>
        </button>
        <button class="icon-action act-oinput ml-10" data-action="createFile" title="Create new file">
          <svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <g id="SVGRepo_iconCarrier" fill="#02de02" fill-rule="nonzero" stroke="none" stroke-width="1">
              <path
                d="M4,23H20a1,1,0,0,0,1-1V6a1,1,0,0,0-.293-.707l-4-4A1,1,0,0,0,16,1H4A1,1,0,0,0,3,2V22A1,1,0,0,0,4,23ZM5,3H15.586L19,6.414V21H5Zm11,9a1,1,0,0,1-1,1H13v2a1,1,0,0,1-2,0V13H9a1,1,0,0,1,0-2h2V9a1,1,0,0,1,2,0v2h2A1,1,0,0,1,16,12Z">
              </path>
            </g>
          </svg>
        </button>
        <button class="icon-action act-oinput" data-action="createFolder" title="Create new folder">
          <svg height="20" width="20" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" xml:space="preserve">
            <g fill="#02de02" stroke-width="1" id="SVGRepo_iconCarrier">
              <polygon points="13,12 13,10 11,10 11,12 9,12 9,14 11,14 11,16 13,16 13,14 15,14 15,12 "></polygon>
              <path d="M21,6V5H11V4h-1V3H3v1H2v16h1v1h18v-1h1V6H21z M20,18h-1v1H5v-1H4V6h1V5h3v1h1v1h10v1h1V18z"></path>
            </g>
          </svg>
        </button>
      </div>
    </div>
    <div class="content">
      <table class="table explorer">
        <thead>
          <tr>
            <th class="col-name">Name</th>
            <th class="col-size">Size</th>
            <th class="col-action">Action</th>
          </tr>
        </thead>
        <tbody>

        </tbody>
      </table>
    </div>
  </div>
  <template id="t">
    <table>
      <tr class="path-row">
        <td colspan="3">..</td>
      </tr>
      <tr class="file-row">
        <td class="col-name"></td>
        <td class="col-size"></td>
        <td class="col-action">
          <button class="icon-action act-play" title="Run this file">
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 153.6 153.6" width="20" height="20"
              style="enable-background:new 0 0 153.6 153.6;" xml:space="preserve">
              <path
                d="M48.3,126.3V49.1c0-4.7,5.4-7.4,9.1-4.5l49.3,37.4c2.9,2.2,3,6.6,0.1,9l-49.3,39.8C53.8,133.7,48.3,131.1,48.3,126.3z"
                fill="#02de02"></path>
            </svg>
          </button>
          <a class="icon-action act-download" title="Download">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#02de02" stroke-width="2"
              stroke-linecap="round" stroke-linejoin="round">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
              <polyline points="7 10 12 15 17 10"></polyline>
              <line x1="12" y1="15" x2="12" y2="3"></line>
            </svg>
          </a>
          <button class="icon-action act-oinput act-rename" data-action="" title="Rename">
            <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
              viewBox="0 0 48.000000 48.000000" preserveAspectRatio="xMidYMid meet">
              <g transform="translate(0.000000,48.000000) scale(0.100000,-0.100000)" fill="#02de02" stroke="none">
                <path
                  d="M240 421 c0 -5 9 -13 20 -16 19 -6 20 -15 20 -141 l0 -134 -93 0 c-59 0 -97 4 -105 12 -17 17 -16 182 1 196 7 6 44 12 82 14 94 4 89 22 -7 26 -110 4 -118 -6 -118 -138 0 -136 4 -140 140 -140 93 0 100 -1 100 -20 0 -13 -7 -20 -20 -20 -11 0 -20 -4 -20 -9 0 -18 60 -28 94 -15 23 9 20 24 -4 24 -19 0 -20 7 -20 145 l0 145 33 0 c50 0 57 -14 57 -110 0 -89 -8 -110 -42 -110 -10 0 -18 -7 -18 -15 0 -22 46 -19 70 5 17 17 20 33 20 120 0 118 -12 140 -80 140 -42 0 -54 14 -20 25 38 12 20 25 -35 25 -30 0 -55 -4 -55 -9z" />
              </g>
            </svg>
          </button>
          <button class="icon-action act-delete" title="Delete">
            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0,0,256,256">
              <g fill="#02de02" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt"
                stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0"
                font-family="none" font-weight="none" font-size="none" text-anchor="none"
                style="mix-blend-mode: normal">
                <g transform="scale(10.66667,10.66667)">
                  <path d="M10,2l-1,1h-5v2h16v-2h-5l-1,-1zM5,7v15h14v-15zM8,9h2v11h-2zM14,9h2v11h-2z"></path>
                </g>
              </g>
            </svg>
          </button>
        </td>
      </tr>
    </table>
    <div class="upload-loading">
      <span class="upload-name"></span>
      <div class="bar"></div>
    </div>
  </template>
  <div class="dialog-background hidden">
    <div class="dialog upload hidden">
      <div class="dialog-head">Uploading</div>
      <div class="dialog-body"></div>
    </div>
    <div class="dialog settings hidden">
      <div class="dialog-head">Settings</div>
      <div class="dialog-body">
        <button class="btn-action act-cred" onclick="Dialog.show('credential')">Change WebUI Credentials</button>
        <button class="btn-action act-hide-show-navigating"></button>
        <button class="btn-action act-reboot">Reboot</button>
      </div>
      <div class="dialog-footer">
        <button class="btn-action act-dialog-close act-escape">Close</button>
      </div>
    </div>
    <div class="dialog navigator-shortcut hidden">
      <div class="dialog-head">Navigator Shortcut</div>
      <div class="dialog-body">
        <p>You can use a keyboard for navigating instead of the on-screen buttons</p>
        <ul>
          <li>Navigating = Arrow Keys</li>
          <li>Back = Backspace</li>
          <li>OK = Enter</li>
          <li>Long Press = M</li>
          <li>Page Up = Page Up</li>
          <li>Page Down = Page Down</li>
          <li>Close Navigator = Escape</li>
          <li>Reload Screen = R</li>
        </ul>
      </div>
      <div class="dialog-footer">
        <button class="btn-action act-escape" onclick="Dialog.show('navigator')">Close</button>
      </div>
    </div>
    <div class="dialog navigator hidden">
      <div class="dialog-head">
        <span>Device Navigator</span>
        <div>
          <button id="force-reload" class="btn-action">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
              <path
                d="M21 12C21 16.9706 16.9706 21 12 21C9.69494 21 7.59227 20.1334 6 18.7083L3 16M3 12C3 7.02944 7.02944 3 12 3C14.3051 3 16.4077 3.86656 18 5.29168L21 8M3 21V16M3 16H8M21 3V8M21 8H16"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </button>
          <select id="navigator-auto-reload">
            <option value="0">Reload After Navigate</option>
            <option value="1000">Auto Reload: 1s</option>
            <option value="2000">Auto Reload: 2s</option>
            <option value="5000">Auto Reload: 5s</option>
            <option value="10000">Auto Reload: 10s</option>
          </select>
        </div>
      </div>
      <div class="dialog-body">
        <canvas id="navigator-screen"></canvas>
        <div class="navigator-canvas">
          <div class="p-up">
            <div class="nav nav-page-up" data-direction="NextPage" title="Next Page">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none">
                <path d="M15.5 12L5.72222 19.1111L5.72222 4.88889L15.5 12Z" stroke="currentColor" stroke-width="1.77778"
                  stroke-linecap="round" stroke-linejoin="round" />
                <line x1="18.1667" y1="4.88889" x2="18.1667" y2="19.1111" stroke="currentColor" stroke-width="1.77778"
                  stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </div>
            <div class="nav nav-up" data-direction="Up" title="Up">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 52 52">
                <path fill="currentColor"
                  d="M43.7,38H8.3c-1,0-1.7-1.3-0.9-2.2l17.3-21.2c0.6-0.8,1.9-0.8,2.5,0l17.5,21.2C45.4,36.7,44.8,38,43.7,38z" />
              </svg>
            </div>
            <div class="nav nav-menu" data-direction="Menu" title="Long Press">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 256 256">
                <circle stroke="currentColor"
                  style="fill:none;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                  id="path822" cx="128" cy="128" r="40" />
                <circle stroke="currentColor"
                  style="fill:none;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                  id="path823" cx="128" cy="128" r="112" />
              </svg>
            </div>
          </div>
          <div class="p-mid">
            <div class="nav nav-left" data-direction="Prev" title="Left">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 52 52">
                <path fill="currentColor"
                  d="M43.7,38H8.3c-1,0-1.7-1.3-0.9-2.2l17.3-21.2c0.6-0.8,1.9-0.8,2.5,0l17.5,21.2C45.4,36.7,44.8,38,43.7,38z" />
              </svg>
            </div>
            <div class="nav nav-ok" data-direction="Sel" title="Select/OK"></div>
            <div class="nav nav-right" data-direction="Next" title="Right">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 52 52">
                <path fill="currentColor"
                  d="M43.7,38H8.3c-1,0-1.7-1.3-0.9-2.2l17.3-21.2c0.6-0.8,1.9-0.8,2.5,0l17.5,21.2C45.4,36.7,44.8,38,43.7,38z" />
              </svg>
            </div>
          </div>
          <div class="p-bot">
            <div class="nav nav-page-down" data-direction="PrevPage" title="Previous Page">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none">
                <path d="M15.5 12L5.72222 19.1111L5.72222 4.88889L15.5 12Z" stroke="currentColor" stroke-width="1.77778"
                  stroke-linecap="round" stroke-linejoin="round" />
                <line x1="18.1667" y1="4.88889" x2="18.1667" y2="19.1111" stroke="currentColor" stroke-width="1.77778"
                  stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </div>
            <div class="nav nav-down" data-direction="Down" title="Down">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 52 52">
                <path fill="currentColor"
                  d="M43.7,38H8.3c-1,0-1.7-1.3-0.9-2.2l17.3-21.2c0.6-0.8,1.9-0.8,2.5,0l17.5,21.2C45.4,36.7,44.8,38,43.7,38z" />
              </svg>
            </div>
            <div class="nav" data-direction="Esc" title="Back">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18"
                viewBox="0 0 24 24" version="1.1">
                <path
                  d="M3.07615,5.61732 C3.23093,5.24364 3.59557,5 4.00003,5 L13.9999996,5 C17.866,5 20.9999996,8.13401 20.9999996,12 C20.9999996,15.866 17.866,19 13.9999996,19 L5.00003,19 C4.44774,19 4.00003,18.5523 4.00003,18 C4.00003,17.4477 4.44774,17 5.00003,17 L13.9999996,17 C16.7615,17 18.9999996,14.7614 18.9999996,12 C18.9999996,9.23858 16.7615,7 13.9999996,7 L6.41424,7 L8.20714,8.79289 C8.59766,9.18342 8.59766,9.81658 8.20714,10.2071 C7.81661,10.5976 7.18345,10.5976 6.79292,10.2071 L3.29292,6.70711 C3.00692,6.42111 2.92137,5.99099 3.07615,5.61732 Z"
                  fill="currentColor">
                </path>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div class="dialog-footer">
        <button class="btn-action" onclick="Dialog.show('navigator-shortcut')">Shortcut</button>
        <button class="btn-action act-dialog-close act-escape">Close</button>
      </div>
    </div>
    <div class="dialog info hidden">
      <div class="dialog-head">Info</div>
      <div class="dialog-body">
        <p>Firmware for offensive pranks, pentest studies and analysis - for educational purposes only. Do not use in
          environments where you are not allowed. All responsibilities for irresponsible usage of this firmware rest on
          your fin, sharky.</p>
        <p>Sincerely, Bruce.</p>
        <p>You can help develop the WebUI interface using <a
            href="https://github.com/pr3y/Bruce/wiki/Files#customizing-the-webui" target="_blank">Custom&nbsp;WebUI</a>
          or <a href="https://github.com/lshaf/bruce-web-interface" target="_blank">Local Bruce WebUI</a> by <a
            href="https://github.com/lshaf" target="_blank">lshaf</a>.
        </p>
      </div>
      <div class="dialog-footer">
        <button class="btn-action act-dialog-close act-escape">Close</button>
      </div>
    </div>
    <div class="dialog oinput hidden">
      <div class="dialog-head">
        <span class="oinput-title"></span>
        <span class="oinput-text"></span>
      </div>
      <div class="dialog-body">
        <label for="oinput-input" class="oinput-label"></label>
        <input type="text" id="oinput-input" class="oinput-text-submit">
      </div>
      <div class="dialog-footer">
        <button class="btn-action btn-default act-save-oinput-file"></button>
        <button class="btn-action act-dialog-close act-escape">Close</button>
      </div>
    </div>
    <div class="dialog credential hidden">
      <div class="dialog-head">
        Change WebUI Credentials
      </div>
      <div class="dialog-body">
        <label for="cred-username" class="oinput-label">Username</label>
        <input type="text" id="cred-username" class="oinput-text-submit" style="margin-bottom: 10px">
        <label for="cred-password" class="oinput-label">Password</label>
        <input type="text" id="cred-password" class="oinput-text-submit">
      </div>
      <div class="dialog-footer">
        <button class="btn-action btn-default act-save-credential">Save</button>
        <button class="btn-action act-escape" onclick="Dialog.show('settings')">Close</button>
      </div>
    </div>
    <div class="dialog editor hidden">
      <div class="dialog-head">
        Edit: <span class="editor-file-name"></span>
      </div>
      <div class="dialog-body">
        <div class="editor-container">
          <div class="line-numbers"></div>
          <textarea class="file-content" style="resize: none;"></textarea>
        </div>
      </div>
      <div class="dialog-footer">
        <button class="btn-action act-save-edit-file" title="CTRL + S">Save</button>
        <button class="btn-action act-run-edit-file" title="ALT + ENTER">Run</button>
        <button class="btn-action act-dialog-close act-escape">Close</button>
      </div>
    </div>
  </div>
  <div class="loading-area hidden">
    <div class="text"></div>
  </div>
  <div class="upload-area hidden"></div>
  <script src="/index.js"></script>
</body>

</html>
